<template>
  <div>
    <el-drawer v-model="drawer" title="编辑合同文件信息" :with-header="true" size="800px">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文件标题：" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入文件标题" />
        </el-form-item>
      </el-form>
      <iframe v-if="type" :src="pdfUrl" style="height: 100%; width: 100%"></iframe>
      <img v-else :src="imgUrl" alt="" />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="del()">删除</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance } from 'element-plus'
  import {
    putContractFileUpdate,
    deleteContractFileRemoveById,
  } from '@/api/controller/contract-file-controller/index'
  const drawer = ref(false)
  const pdfUrl = ref()
  const imgUrl = ref()
  const type = ref(true)
  const show = async (row) => {
    ruleForm.value = { ...row }
    if (row.fileType.toLowerCase() === 'pdf') {
      pdfUrl.value = '/web/viewer.html?file=' + row.filePath
      type.value = true
      drawer.value = true
    } else if (row.fileType.toLowerCase() === 'jpg' || row.fileType.toLowerCase() === 'png') {
      type.value = false
      imgUrl.value = row.filePath
      drawer.value = true
    } else {
      window.open(row.filePath)
    }
    nextTick(() => {
      ruleFormRef.value.clearValidate()
    })
  }
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = ref({
    id: null,
    title: null,
  })
  const rules = reactive({
    title: [
      { required: true, message: '请输入文件标题', trigger: 'blur' },
      { min: 0, max: 64, message: '长度不超过64个字符', trigger: 'blur' },
    ],
  })
  const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        const result = await putContractFileUpdate(ruleForm.value, { loading: true })
        if (result.code === 200) {
          ElMessage.success('更新成功')
          await emit('getData')
          drawer.value = false
        }
      } else {
        ElMessage.warning('请正确填写表单')
        return false
      }
    })
  }
  const del = () => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        const result = await deleteContractFileRemoveById(
          { id: ruleForm.value.id },
          { loading: true },
        )
        if (result.code === 200) {
          await emit('getData')
          drawer.value = false
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }
  const emit = defineEmits(['getData'])
  defineExpose({
    show,
  })
</script>
<style lang="scss" scoped>
  img {
    width: 760px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
  }
</style>
